<template>
  <div class="min-h-screen bg-pink-gradient flex flex-col">
    <!-- 顶部栏 -->
    <div class="glass-effect px-6 py-4 shadow-pink-md">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <h1 class="text-xl font-bold text-pink-600">
            {{ authStore.userInfo?.display_name || '欢迎' }} 💕
          </h1>
        </div>
        <div class="flex items-center gap-4">
          <!-- 通知 -->
          <n-badge :value="3" :max="99">
            <n-button text class="text-2xl">🔔</n-button>
          </n-badge>
          <!-- 设置 -->
          <n-button text class="text-2xl" @click="goToSettings">⚙️</n-button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="flex-1 overflow-y-auto pb-20">
      <router-view />
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-lg border-t-2 border-pink-200 shadow-pink-lg">
      <div class="flex items-center justify-around py-3 safe-area-bottom">
        <div
          v-for="tab in tabs"
          :key="tab.name"
          class="flex flex-col items-center gap-1 cursor-pointer transition-all duration-300"
          :class="activeTab === tab.name ? 'text-pink-600 scale-110' : 'text-pink-300'"
          @click="switchTab(tab.name)"
        >
          <span class="text-2xl">{{ tab.icon }}</span>
          <span class="text-xs font-medium">{{ tab.label }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

// 底部导航栏配置
const tabs = [
  { name: 'dashboard', label: '首页', icon: '💝' },
  { name: 'schedule', label: '日程', icon: '📅' },
  { name: 'interaction', label: '互动', icon: '💌' },
  { name: 'profile', label: '我们', icon: '👫' },
]

// 当前激活的Tab
const activeTab = computed(() => route.name as string)

// 切换Tab
const switchTab = (name: string) => {
  router.push({ name })
}

// 跳转到设置
const goToSettings = () => {
  router.push({ name: 'settings' })
}
</script>

<style scoped>
/* 底部导航栏点击效果 */
.cursor-pointer:active {
  transform: scale(0.95);
}

/* 移动端安全区域适配 */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
